import React, { useEffect, ReactText, useState } from 'react'
import _ from 'lodash';
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Select } from 'antd';
//state
import { WordUserRelationTypeSelectState } from './reducer';
//action
import * as Action from './reducer'

const { Option } = Select;

export interface WordUserRelationTypeSelectProps {
    state: WordUserRelationTypeSelectState;
    fetch: typeof Action.fetch
    setId: typeof Action.setId
    setValue: typeof Action.setValue
}


export const _WordUserRelationTypeSelect: React.SFC<WordUserRelationTypeSelectProps> = (props) => {
    const {
        state,
        fetch, setId, setValue
    } = props
    const [currentValue, setCurrentValue] = useState('');

    useEffect(() => {
        fetch()
    }, [fetch])

    useEffect(() => {
        const a = _.findIndex(state.dto.dtos, (e) => e.id === state.currentTypeId)
        if (state.dto.dtos[a])
            setCurrentValue(state.dto.dtos[a].value)
    }, [state.currentTypeId, state.dto.dtos])

    return (
        <div>
            <Select
                showSearch
                style={{ width: "100%" }}
                placeholder='选择标签'
                optionFilterProp="children"
                value={currentValue}
                onSelect={(index: ReactText) => {
                    const i = _.findIndex(state.dto.dtos, (e) => e.value === index)
                    setId(state.dto.dtos[i].id)
                    setValue(index.toString())

                }}
                dropdownRender={menu => (
                    <div>
                        {menu}
                        {/* <Divider style={{ margin: '4px 0' }} />
                        <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
                            <Input style={{ flex: 'auto' }} value={tagAdd} onChange={(e) => {
                                setTagAdd(e.target.value)
                            }} />
                            <Button
                                style={{ flex: 'none', cursor: 'pointer' }}
                                onClick={() => { addTag(tagAdd) }}
                            >Add item</Button>
                        </div> */}
                    </div>
                )}
            >
                {state.dto.dtos.map(e => (
                    <Option value={e.value}>{e.value}</Option>
                ))}
            </Select>
        </div>
    )
}

const mapStateToProps = (state: RootState) => ({
    state: state.WordUserRelationTypeState
})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        fetch: Action.fetch,
        setId: Action.setId,
        setValue: Action.setValue,
    }, dispatch)

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordUserRelationTypeSelect = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordUserRelationTypeSelect)

export default WordUserRelationTypeSelect